<template>
    <div class="box">
        <div class="logins">
            <div class="base">
                <div class="line"></div>
                <div class="text">
                    <p class="txt">WELCOME</p>
                    <p class="title">七尾智慧社区管理系统后台</p>
                </div>
                <div class="inputs">
                    <div class="admin">
                        <img src="https://cdn7.axureshop.com/demo2024/2033334/images/登录/u3992.svg" alt="" class="cover">
                        <el-input placeholder="用户名" v-model="nickname" clearable></el-input>
                    </div>
                    <div class="password">
                        <img src="https://cdn7.axureshop.com/demo2024/2033334/images/登录/u3996.svg" alt="" class="pic">
                        <el-input placeholder="密码" v-model="psw" show-password  maxlength="6"></el-input>
                    </div>
                    
                </div>
                <span @click="buy()" class="buttons">登录</span>
                <el-alert title="用户名或密码有误，请重新输入" type="error" center show-icon  v-show="bol" @close="bol=false"></el-alert>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"login",
    data(){
        return {
            nickname:'',
            psw:'',
            bol:false
        }
    },
    methods: {
            buy() {
                console.log(this.$route.query.returnUrl)
                if(this.nickname=='七尾' && this.psw=='666666'){
                    
                    localStorage.setItem("logins", this.nickname)
                    this.$router.push({
                        path: "/index"
                    })
                    
                }else{
                    this.bol=true
                    this.nickname=''
                    this.psw=''
                }
            }
        }
}
</script>

<style scoped>
.box{
    width: 100%;
    height: 100vh;
    background-image: url("../assets/bg.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    position: relative;
}
.logins{
    position: fixed;
    left: 50%;
    margin-left: -169.5px;
    top: 50%;
    margin-top: -174.5px;
    width: 339px;
    height: 349px;
}
.base{
    position: relative;
    width: 339px;
    height: 349px;
    
}
.line{
    border-width: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 2px;
    height: 73px;
    background-color: white;
}
.title{
    font-size: 24px;
    color: #fff;

}
.txt{
    font-size: 32px;
    color: #fff;
}
p{
    margin: 0 !important;
}
.text{
    margin-left: 30px;
}

.cover{
    width: 13px;
}
.pic{
    width: 13px;
}
.admin{
    position: relative;
    height: 40px;
    margin-top: 40px;
}
.password{
    position: relative;
    height: 40px;
    margin-top: 40px;
}
.cover{
    position: absolute;
    left: 10px;
    top: 12px;
    z-index: 4;
}
.pic{
    position: absolute;
    left: 10px;
    top: 12px;
    z-index: 4;
}
.el-input.el-input--suffix>>>.el-input__inner{
    padding: 0 30px;
}
.buttons{
    margin-top: 40px;
    background-color: rgba(24, 144, 255, 1);
    color: #fff;
    height: 40px;
    width: 339px;
    line-height: 40px;
    display: inline-block;
    text-align: center;
}
.el-alert{
    position: fixed;
    left: 50%;
    width: 300px;
    height: 40px;
    top: 0;
}
</style>